<template>
  <div class="dashboard-container">
    <div v-loading="loading" class="app-container">

      <el-card class="tree-card">
        <!-- 传数据插槽 -->
        <treeTools :item="headerData" :is-header="true" />

        <!-- 树形控件 -->
        <el-tree :data="treeData" :props="treeOption">
          <!-- 传结构插槽 -->
          <template #default="{data}">
            <treeTools :item="data" :is-header="false" @edit-node="editNode" @del-node="getList" @add-node="addNode" />
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- 弹窗 -->
    <dept-add
      ref="deptDialog"
      :dialog-visible="dialogVisible"
      :node-data="currentNode"
      :list="list"
      @add-dept="getList"
      @close="close"
    />
  </div>
</template>

<script>
import treeTools from '@/views/departments/components/tree-tools'
import { getDepartment } from '@/api/company.js'
import { transToTree } from '@/utils/index.js'
import deptAdd from '@/views/departments/components/dept-add'
export default {
  components: {
    treeTools,
    deptAdd
  },
  data() {
    // 数据
    return {
      loading: false,
      // 要传的数据
      headerData: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'
      },
      // 假数据
      treeData: [
        // {
        //   name: '总裁办',
        //   manager: '曹操',
        //   children: [{ name: '董事会', manager: '曹丕' }]
        // },
        // { name: '行政部', manager: '刘备' },
        // { name: '人事部', manager: '孙权' }
      ],
      treeOption: {
        label: 'name'
      },
      isRoot: {
        type: Boolean,
        default: false
      },
      // 控制弹窗显示隐藏 父传子
      dialogVisible: false,
      list: [],
      currentNode: {}
    }
  },
  created() {
    this.getList()
  },
  // 方法
  methods: {
    // 获取数据
    async getList() {
      const { data } = await getDepartment()
      this.loading = true
      // this.treeData = data.depts
      // console.log(data.depts)
      this.treeData = transToTree(data.depts, '')
      // 拿到原始数据
      this.list = data.depts
      this.loading = false
    },
    //  接收子组件传来的事件 控制弹窗显示状态
    // 打开弹窗
    addNode(val) {
      this.dialogVisible = true
      this.currentNode = val
    },
    // 接收子组件传递过来的事件
    // 关闭弹窗
    close() {
      this.dialogVisible = false
    },
    // 编辑部门
    async  editNode(val) {
      this.currentNode = val
      await this.$refs.deptDialog.getDetail(this.currentNode.id)
      this.dialogVisible = true // 打开窗口
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 30px;
  font-size:14px;
}
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
